﻿@charset "utf-8";
/*
 * 页面整体内部样式
 * */
/*资源概览页面样式start*/
.main-page{
	position: relative;
	/*overflow: hidden;*/
	margin: 20px 10px;
}
.tab-header{
	position: relative;
	height: 54px;
	margin: 10px 10px 0 10px;
	background-color: #fff;
	border-bottom: 1px solid #d6e8f3;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.tab-list{
	display: inline-block;
	margin: 26px 15px 0 15px;
	height: 25px;
	font-size: 14px;
	color: #6f87ab;
    border-bottom: 3px solid transparent;
	cursor: pointer;
}
.tab-list:hover{
	border-bottom: 3px solid #0099ff;
}
.tab-list.on{
	color: #0099ff;
	border-bottom: 3px solid #0099ff;
}
.tab-separate{
	display: inline-block;
	margin: 0 5px;
	width: 1px;
	height: 12px;
	background-color: #6f87ab;
}

.page-content{
	position: relative;
	margin: 0 10px;
}
.page-bg{
	background-color: #fff;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	overflow: hidden;
}
.search-panel{
	position: relative;
	height: 54px;
	background-color: #fff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.input-box{
	position: relative;
	display: inline-block;
	width: 170px;
	height: 34px;
	margin: 10px 0 0 10px;
	float: left;
	overflow: hidden;
}
.import-box{
	display: inline-block;
	width: 148px;
	height: 32px;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 32px;
	border: 1px solid #bddaeb;
	border-radius: 4px;
	outline: none;
}
.import-box:focus{
	border: 1px solid #0099ff;
}

/*虚拟机资源卡片展示样式*/
.resources-show-panel{
	padding-bottom: 40px;
}
.quota-content-list{
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 572px;
	height: 200px;
	margin: 20px 20px 0 0;
	background-color: #fff;
	border-radius: 10px;
}
.quota-content-list:hover{
	box-shadow: 0 0 40px #d7e3eb;
}
.quota-header{
	position: relative;
	margin: 20px;
}
.quota-title{
	font-size: 14px;
	color: #374b52;
	font-weight: bold;
}
.quota-tip{
	float: right;
}
.quato-item{
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 186px;
}
.img-show{
	display: inline-block;
	width: 80px;
	height: 80px;
	margin-left: 52px;
}
.quota-label{
	display: inline-block;
	width: 186px;
	text-align: center;
	font-size: 13px;
	color: #374b52;
}

/*虚拟机详情弹出页面样式*/
.pop-page{
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: #fff;
}
.pop-title{
	display: inline-block;
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #d6e8f3;
}
.pop-title>a{
	display: inline-block;
	height: 24px;
	font-size: 14px;
	color: #374b52;
	margin: 14px 0 0 40px;
	border-bottom: 2px solid #0099ff;
}
.close-pop{
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
.pop-header{
	width: 100%;
	height: 74px;
	border-bottom: 1px solid #f1f6f9;
	position: relative;
	overflow: hidden;
}
.pop-tab{
	height: 34px;
	margin: 40px auto 0;
}
.pop-tab-item{
	display: inline-block;
	height: 32px;
	font-size: 14px;
	color: #6f87ab;
	border-bottom: 2px solid transparent;
	cursor: pointer;
}
.pop-tab-item.on ,.pop-tab-item:hover{
	color: #0099ff;
	border-bottom: 2px solid #0099ff;
}
.view-content , .config-box{
	width: 590px;
	margin: 0 auto;
}
.pop-cnt-box{
	position: relative;
	overflow: hidden;
	margin: 10px 0;
}
.pop-cnt-item{
	width: 100%;
	height: 20px;
	line-height: 20px;
	margin: 10px 0;
}
.pop-cnt-title{
	display: inline-block;
	width: 254px;
	margin-right: 14px;
	text-align: right;
	font-size: 12px;
	color: #6f87ab;
}
.pop-cnt-text{
	color: #374b52;
}
.config-item{
	position: relative;
	overflow: hidden;
	margin: 20px 66px;
}
.config-card{
	position: relative;
	overflow: hidden;
	width: 136px;
	height: 80px;
	float: left;
	margin: 0 8px;
	background-color: #f1f6f9;
	border-radius: 6px;
}
.card-head{
	display: block;
	color: #6f87ab;
	margin: 10px;
}
.card-num{
	display: block;
	width: 100%;
	margin-top: 6px;
	font-size: 18px;
	color: #374b52;
	font-weight: bold;
	text-align: center;
}
.ip-item{
	width: 590px;
	height: 48px;
	line-height: 48px;
	margin: 0 auto;
	border-top: 2px solid #f1f6f9;
}
/*分配IP弹出层样式*/
.ip-title{
	height: 34px;
	line-height: 34px;
	padding-left: 50px;
	color: #374B52;
}
.set-ip-item{
	position: relative;
	overflow: hidden;
	height: 34px;
	line-height: 34px;
	padding-left: 50px;
	color: #374B52;
}
.ip-radio{
	position: absolute;
	top: 7px;
	left: 15px;
}
.set-ip-item:hover{
	background-color: #e5f5ff;
}
.set-ip-item.active{
	background-color: #bce4ff;
}
.set-ip-item:hover .ip-radio{
	background-position: -20px 0;
}
.set-ip-item.active .ip-radio,.li_tr.active .ip-radio{
	background-position: -40px 0;
}
.pop-foot{
	position: absolute;
	width: 100%;
	height: 74px;
	background-color: #fff;
	border-top: 1px solid #d6e8f3;
	line-height: 74px;
	bottom: 0;
}
.pop_btn{
	display: inline-block;
	width: 120px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	border-radius: 34px;
	font-size: 14px;
	color: #fff;
	background-color: #0199ff;
	float: right;
	margin: 20px;
	cursor: pointer;
}
.pop_btn:hover{
	background-color: #34aeff;
}

.pop-group{
	position: relative;
	margin: 0 0 20px 40px;
}
.group-title{
	position: relative;
	display: inline-block;
	width: 80px;
	height: 34px;
	margin-right: 10px;
	line-height: 34px;
	color: #374B52;
	font-size: 12px;
	text-align: right;	
}
.text-box{
	display: inline-block;
	position: relative;
}
.group-text{
	display: inline-block;
	width: 400px;
	height: 32px;
	padding: 0 10px;
	line-height: 32px;
	border: 1px solid #bddaeb;
	border-radius: 4px;
	outline: none;
}
.group-text:focus{
	border: 1px solid #0099ff;
}
.text-error{
	display: none;
	position: absolute;
	color: #ff6858;
	top: -20px;
	right: 0;
}
.text-box.error .group-text{
	border: 1px solid #ff6858;
}
.text-box.error .text-error{
	display: inline-block;
}

/*创建虚拟机弹出页面样式*/
.step-show{
	width: 340px;
	position: relative;
	overflow: hidden;
	margin: 40px auto;
}
.step-text{
	position: relative;
	overflow: hidden;
}
.step-itr{
	display: inline-block;
	position: relative;
	font-size: 14px;
	color: #374B52;
}
.step-itr.on{
	color: #0099ff;
}
.step-line{
	display: inline-block;
	width: 252px;
	height: 20px;
	background: url("../image/icon/step_progress.png") no-repeat;
	margin: 10px 0 0 48px;
}
.step-line.mid{
	background-position: 0 -20px;
}
.step-line.end{
	background-position: 0 -40px;
}
.num_btn{
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #bddaeb;
	border-radius: 4px;
	margin: 7px 0 0 10px;
	float: right;
	cursor: pointer;
}
.num_btn:hover{
	border: 1px solid #0099ff;
}
.num_icon{
	display: inline-block;
	width: 11px;
	height: 11px;
	background: url("../image/icon/num_icon.png") no-repeat;
	margin: 5px 0 0 5px;
}
.del-num-icon{
	background-position: -11px 0;
}
/*创建虚拟机第二步*/
.config-panel{
	width: 590px;
	margin: 0 auto;
	position: relative;
}
.vitual-config-item{
	width: 100%;
	height: 90px;
	line-height: 90px;
	border-bottom: 1px solid #f1f6f9;
}
.config-group{
	display: inline-block;
	width: 48%;
}
.config-radio{
	position: absolute;
	top: 7px;
	left: 30px;
}
.config-title{
	display: inline-block;
	width: 68px;
	text-align: center;
	color: #374b52;
	float: left;
}
.config-text,.user-defined{
	display: inline-block;
	width: 68px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	color: #374b52;
	border: 1px solid #bddaeb;
	border-radius: 4px;
	float: left;
	margin: 28px 10px 0 0;
	cursor: pointer;
}
.config-text:hover{
	color: #FFF;
	background-color: #0099ff;
	border: 1px solid #0099ff;
}
.config-text.on{
	color: #FFF;
	background-color: #0099ff;
	border: 1px solid #0099ff;
}
.config-text.disabled{
	color: #b4c6cc;
	background-color: #e4edf0;
	border: 1px solid #bddaeb;
}
.user-defined{
	outline: none;
	cursor: auto;
}
.user-defined:focus{
	border: 1px solid #0099ff;
}
.drag{
	position: relative;
	display: inline-block;
	width: 390px;
	height: 10px;
	float: left;
	margin: 32px 10px 0 0;
	background-color: #e4edf0;
    border-radius: 10px;
}
.bar{
    position: absolute;
    height: 10px;
    left: 0;
    bottom: 0;
    background-color: #0099ff;
    border-radius: 10px;
}
.drag-btn{
    position: absolute;
    width: 20px;
    height: 20px;
    left: -10px;
    bottom:-5px;
    background-position: 0 -20px;
    cursor: pointer;
}
.drag_limit{
    display: inline-block;
    position: absolute;
    height: 20px;
    width:40px;
    top: -18px;
    text-align: center;
}
.start-count{
    left:-14px;
}
.end-count{
    right:-12px;
}
.back-set-ip{
	color: #374B52;
	border: 1px solid #F1F6F9;
	background-color: #fff;
}
.back-set-ip:hover{
	border: 1px solid #0099ff;
	color: #374B52;
	background-color: #fff;
}

/*安全组页面样式*/
.safety-manage,.mount-manage{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	z-index: 8;
}
.safe-manage-panel,.mount-manage-panel{
	position: absolute;
	width: 98%;
	height: 100%;
	top: 0;
	right: 0;
	border-radius: 10px;
	box-shadow: -10px 0 40px #d7e3eb;;
	background-color: #fff;
}
.panel-header{
	position: relative;
	width: 100%;
	height: 60px;
	line-height: 60px;
}
.safety-name{
	font-size: 16px;
	color: #374b52;
	margin-left: 2%;
}
.panel-handle-box{
	width: 100%;
	height: 54px;
	border-top: 1px solid #f1f6f9;
}
/* 服务信息 卷组 镜像等页面 样式-wxz */
.td_btn.unc{
	color:#b4c6cc;
	cursor: default;
}
.td_btn.unc:hover{
	border: 1px solid #b4c6cc;
}
.undel-icon{
	width: 14px;
	height: 14px;
	background: pink;
	margin:10px 0 0 6px;
	background: url("../image/icon/select_icon.png") no-repeat;
	background-position: -83px -3px;
	cursor: pointer;
	display: none;
}
.undel-icon:hover{
	background-position: -83px -23px;
}
.li_tr:hover .undel-icon{
	display: inline-block;
}
.state-available{
	background-color: #cce5ff;
	color: #0099ff;
}
.panel-header .tab-list{
	margin:0 0 0 40px;
	height:57px;
}
.panel-header .tab-list .tab-item{
	display: inline-block;
	margin-top: 10px;
}
.mount-manage-panel .li_tr{
	cursor: pointer;
}}
.ul_body.no-data .no-data-box{
	display: block;
}
.no-data-box{
	clear: both;
	text-align: center;
	color: #b4c6cc;
	font-size: 14px;
	width: 200px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -100px;
}
/*导入镜像*/
.mirror-radio{
	float: left;
	margin-top: 7px;
}
.upload-mirror{
	position: relative;
	display: inline-block;
	width: 420px;
	border-radius: 4px;
}
.upload-btn{
	position: relative;
	overflow: hidden;
	display: inline-block;
	float: right;
	width: 70px;
	height: 32px;
	line-height: 32px;
	color: #374b52;
	text-align: center;
	border: 1px solid #bddaeb;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	cursor: pointer;
}
.choice-mirror{
	display: inline-block;
	position: absolute;
	width: 70px;
	height: 32px;
	cursor: pointer;
	top: 0;
	right: 0;
	opacity: 0;
	border: 1px solid #bddaeb;
}
.upload-btn:hover{
	cursor: pointer;
	border: 1px solid #0099ff;
}
.mirror-name{
	display: inline-block;
	width: 337px;
	height: 32px;
	padding-left: 10px;
	line-height: 32px;
	border: 1px solid #bddaeb;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-right: none;
}

/*创建卷组*/
.volume-radio{
	float: left;
	margin: 7px 0 0 10px;
	cursor: pointer;
}
.time-panel .input-box{
	height: 32px;
}

/*物理机资源*/
.second-menu{
	position: relative;
	overflow: hidden;
	height: 74px;
	border-bottom: 1px solid #f1f6f9;
}
.second-menu-list{
	width: 220px;
	height: 34px;
	margin: 40px auto 0;
}
.second-menu-list>li{
	float: left;
	position: relative;
	overflow: hidden;
}
.menu-text{
	display: inline-block;
	position: relative;
	overflow: hidden;
	height: 32px;
	margin: 0 20px;
	font-size: 14px;
	color: #6f87ab;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.menu-text:hover ,.menu-text.on{
	color: #0099ff;
	border-bottom: 2px solid #0099ff;
}
.physics-text{
	position: relative;
	width: 544px;
	margin: 28px auto 0;
	overflow: hidden;
}
.host-itr{
	font-size: 16px;
	color: #374b52;
	margin: 20px 0;
}
.host-text,.about-phy>li{
	font-size: 14px;
	color: #374b52;
	line-height: 24px;
}
.about-phy{
	position: relative;
	float: left;
	width: 180px;
	margin-left: 60px;
}

/*IP管理模块样式*/
.edit-ip-text{
	font-size: 12px;
	color: #374B52;
	margin-left: 10px;
}

/*自动删除设置*/
.delete-day{
	position: relative;
	overflow: hidden;
	height: 140px;
	margin: 0 100px;
}
.confirm-label{
	display: inline-block;
	height: 34px;
	line-height: 34px;
	font-family: "微软雅黑";
	color: #374B52;
	font-size: 14px;
}
.delete-day .import-box{
	width: 60px;
	text-align: right;
	font-size: 14px;
	color: #374B52;
}
.select-unit{
	position: relative;
	display: inline-block;
	width: 80px;
	height: 32px;
	border: 1px solid #bddaeb;
	border-radius: 4px;
	float: right;
	margin-right: 66px;
}
.select-unit:hover ,.select-unit.on{
	border: 1px solid #0099ff;
}
.auto-text{
	float: right;
	margin-top: -36px;
}
.unit-text{
	display: inline-block;
	position: relative;
	width: 60px;
	height: 34px;
	line-height: 34px;
	padding: 0 10px;
	font-size: 14px;
	color: #374B52;
}
.unit-panel{
	position: absolute;
	border: 1px solid #0099ff;
	border-top: none;
	top: 30px;
	left: -1px;
	padding-bottom: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	display: none;
	z-index: 2;
}
.unit-item{
	width: 60px;
	height: 24px;
	padding: 0 10px;
	line-height: 24px;
	background-color: #fff;
	font-size: 14px;
	color: #374B52;
	cursor: pointer;
}
.unit-item:hover{
	color: #0099ff;
}
.set-prompt{
	display: inline-block;
	position: relative;
	font-size: 14px;
	color: #b4c6cc;
}
.sure-auto-delete{
	display: inline-block;
	position: relative;
	margin-top: 20px;
	font-size: 14px;
	color: #374B52;
	cursor: pointer;
}
.sure-auto-delete .check-radio{
	margin: 1px 10px 0 20px;
	float: left;
}
.sure-auto-delete:hover .check-radio{
	background-position: -20px -20px;
}
.sure-auto-delete .check-radio.checked{
	background-position: -40px -20px;
}